<template>
  <div class="back" @click="skipBack">
    <img style="width: 20px" src="../../assets/箭头-左.png" alt="" />
  </div>
  <div class="titou">详情</div>
  <div class="title">{{ info.theme }}</div>
  <div class="time">
    <div class="left">
      <span style="fontweight: bold">时间：</span>{{ timeformat(info.timeStamp) }}
    </div>
  </div>
  <div class="img"><img style="width: 100%" :src="info.pic" alt="" /></div>
  <div class="content">
    <div v-html="bulk"></div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue-demi";
import store from "../../store";

export default {
  setup() {
    function skipBack() {
      window.location.replace("../Home/Home.html");
      // window.history.back();
      console.log(2);
    }
    var timeformat = function (shijianchuo) {
      var time = new Date(shijianchuo * 1);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      return y + "-" + m + "-" + d;
    };
    let info = ref({});
    let ind = localStorage.getItem("index_");
    console.log(ind, "ind");
    const bulk = ref();
    onMounted(() => {
      store.sendAct2().then((val) => {
        info.value = val.data[ind];
        bulk.value = info.value.bulk.split("\n");
        console.log(bulk.value);
        bulk.value = bulk.value.map((item) => `<p>${item}</p>`);
        bulk.value = bulk.value.join("");
      });
    });

    return { info, timeformat, skipBack, bulk };
  },
};
</script>

<style>
body {
  max-width: 100%;
  overflow-x: hidden;
}
.title {
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  font-weight: bold;
}

.titou {
  position: absolute;
  top: 12px;
  font-size: 16px;
  color: #414141;
  left: calc(50% - 16px);
}

.content {
  padding: 10px 20px;
  font-size: 12px;
  line-height: 2;
  text-indent: 24px;
}

.time {
  display: flex;
  font-size: 12px;
  padding: 4px 20px;
  border-bottom: 1px solid #ccc;
  color: #666;
}

.img {
  padding: 4px 20px;
}

.left {
  margin-right: 10px;
}

.back {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background-color: brown;
  text-align: center;
  overflow: hidden;
}

.back > img {
  margin-top: 5px;
}

.img > img {
  border-radius: 10px;
  margin-top: 20px;
}
</style>
